<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.img_url" alt="" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 30无理由发货 -->
    <van-row>
      <van-col span="8"
        ><van-icon
          class="van-icon-checked"
          color="darkred"
        />30天无忧退货</van-col
      >

      <van-col span="8"
        ><van-icon
          class="van-icon-checked"
          color="darkred"
        />48小时快速退费</van-col
      >
      <van-col span="8"
        ><van-icon
          class="van-icon-checked"
          color="darkred"
        />满88元免邮费</van-col
      >
    </van-row>
    <div class="info">
      <h2>{{ info.name }}</h2>
      <section>{{ info.goods_brief }}</section>
      <div>{{ info.retail_price | RMBFormat }}</div>
    </div>
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell>
    <van-popup v-model="show" position="bottom" :style="{ height: '30%' }"
      >内容内容</van-popup
    > -->

    <!-- 商品参数 -->
    <div class="canshu">
      <h2>商品参数</h2>
      <ul>
        <li v-for="item in attribute" :key="item.id">
          <span>{{ item.name }}</span>
          <big>{{ item.value }}</big>
        </li>
      </ul>
    </div>
    <!--  v-for="item in info" :key="item.id" -->
    <div class="tupian" v-html="info.goods_desc">
      <!-- 遍历后会有很多 -->
      {{ info.goods_desc }}
      <p>
        <img
          src="http://yanxuan.nosdn.127.net/162f14bce2afba3a484ce8fb5da1e58b.jpg"
          alt=""
        />
      </p>
    </div>
    <!-- 中间图片 -->
    <div class="issue">
      <div class="line_title">
        <span></span>
        <h3>常见问题</h3>
      </div>
      <ul class="content">
        <li v-for="item in issue" :key="item.id">
          <h3>{{ item.question }}</h3>
          <p>
            {{ item.answer }}
          </p>
        </li>
      </ul>
      <div class="related">
        <div class="line_title">
          <span></span>
          <h3>相关产品</h3>
        </div>
      </div>
    </div>

    <!-- 收藏 -->
    <van-goods-action>
      <van-goods-action-icon :icon="iconShow ? 'star' : 'star-o'"   :text="iconShow ? '已收藏' : '未收藏'" color="#ff5000"   @click="gaibian"/>

      <van-goods-action-icon icon="cart-o" text="购物车" :badge="goodsCo?goodsCount:0" @click="tiaozhuan"/>
      <van-goods-action-button type="danger" text="立即购买" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="hdclick"
      />
    </van-goods-action>
    <Products :produ="goodsList" />

    <van-sku
      ref="sku"
      v-model="skushow"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />78
  </div>
</template>

<script>
import Products from "../components/Products";
import { GetDetails, GetRelated, GetCartNum,postToAddCart } from "@/request/api";
export default {
  components: {
    Products,
  },
  data() {
    return {
      //sku数据
      skushow: false,
      sku: {
        hideStock: true,
        tree: [],
        price: "",
        stock_num: "",
      },
      goods: {
        picture: "",
      },

      // 商品详情数据
      iconShow: false,
      banner: [],
      info: [],
      // 产品参数
      attribute: [],
      // 常见问题
      issue: [],
      //相关商品
      goodsList: [],
      // 接收点击时传进来的id
      categoryId: "",
      goodsCount: 0,
      productList:[],
      goodsCo:false
    };
  },
  created() {
    //判断购物车是否登录
    let token = localStorage.getItem('token')
    if(token){
       this.goodsCo=true
    }
    GetDetails({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      this.banner = res.data.gallery;
      let { info, attribute, issue,productList } = res.data;

      this.info = info;
      //   产品参数
      this.attribute = attribute;
      this.issue = issue;
      //sku中的商品数据
      this.goods.picture = info.list_pic_url;
      this.sku.price = info.retail_price;
      this.sku.stock_num = info.goods_number;
      this.productList=productList
    });

    GetRelated({
      id: this.$route.query.id,
    }).then((res) => {
      let { goodsList } = res.data;
      this.goodsList = goodsList;
    });
    // 获取购物车数量
    GetCartNum().then((res) => {
      this.goodsCount = res.data.cartTotal.goodsCount;
    });
  },
  methods: {
    hdclick() {
      //判断是否登录
      // let token = localStorage.getItem('token')
      // if(!token){
      //    this.$toast('请先登录')
      //    setTimeout(()=>{
      //     this.$router.push('/wode')
      //    },1000)
      //    return
      // }
    let rs = this.utils.mustBeLogin()
           if(!rs) return

      this.skushow = !this.skushow;
      if (!this.skushow) {
        let stepNum = this.$refs.sku.getSkuData().selectedNum;
        // 加入购物车
        postToAddCart({
          goodsId:this.$route.query.id,
          productId:this.productList[0].id,
          number:stepNum
        }).then(res=>{
          console.log('点击加入购物车之后的res',res);
          this.goodsCount=res.data.cartTotal.goodsCount
          this.$toast.success('添加成功')
        })
      }
    },
    gaibian() {
      let rs = this.utils.mustBeLogin()
         if(!rs) return
      this.iconShow = !this.iconShow;
      
    },
    tiaozhuan(){
      this.$router.push('/cart')
    }
  },
};
</script>
 
<style lang = "less" scoped>
.details {
  margin-bottom: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  /* line-height: 150px; */
  text-align: center;
  vertical-align: bottom;
  height: 414px;
  background-color: #39a9ed;
  img {
    width: 100%;
  }
}
.van-col {
  font-size: 13px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.van-icon {
  position: relative;
  display: inline-block;
  font: normal normal normal 14px/1 vant-icon;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.info {
  background: #fff;
  text-align: center;
  line-height: 40px;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  h2 {
    font-size: 20px;
  }
  div {
    color: darkred;
  }
}
.van-cell {
  margin-bottom: 20px;
}
/* 参数样式 */
.canshu {
  padding: 10px;
  background: #fff;
  h2 {
    font-size: 20px;
    line-height: 40px;
  }
  ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  ul {
    li {
      background: #efefef;
      border-radius: 6px;
      height: 30px;
      align-items: center;
      display: flex;
      justify-content: space-between;
      margin-bottom: 5px;
      span {
        color: #999;
        width: 20%;
        margin-right: 5px;
        text-align: right;
      }
      big {
        flex: 1;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
/* 样式穿透 */
/deep/.tupian {
  p {
    img {
      width: 100%;
      display: block;
    }
  }
}
/* 常见问题 */
.issue {
  margin-top: 10px;
  background: #fff;
  .line_title {
    width: 100%;
    height: 40px;
    position: relative;
    font-size: 18px;
    background: #fff;
    span {
      width: 50%;
      height: 2px;
      background: #ccc;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
    h3 {
      width: 30%;
      height: 40px;
      background: #fff;
      position: absolute;
      text-align: center;
      line-height: 40px;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  }
  ul {
    li {
      h3 {
        padding-left: 20px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        position: relative;
        padding-right: 10px;
      }
      p {
        padding-left: 20px;
        padding-right: 10px;
        color: #666;
      }
    }
  }
}
h4 {
  background-color: #ffffff;
  text-align: center;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
/* pudction相关产品 */
.product_list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  li {
    width: 49%;
    background: #fff;
    text-align: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    img {
      width: 100%;
      display: block;
    }
    section {
      margin-top: 5px;
      color: darkred;
    }
  }
}
/* 最底部样式 */
.van-goods-action {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  box-sizing: content-box;
  height: 50px;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
}
.van-goods-action[data-v-87884aca] {
  z-index: 99999;
}
/deep/.van-sku-messages {
  padding: 0;
}
.van-sku-container {
  min-height: auto;
}
/* /deep/.van-sku__stepper-title,/deep/.van-sku__stepper{
float:none;
} */
</style>